<template>
	<view>
		<uni-nav-bar class="custom-nav-bar" :statusBar="true" :fixed="true">
			<view class="nav-title" @click="titleClick">
				<view>{{title}}</view>
				<view class="nav-title-icon">
					<image src="../../../../static/theme/default/home/xiajiantou.png" mode=""></image>
				</view>
			</view>
		</uni-nav-bar>
		<view class="" v-if="batchs.length">
			<view class="batch-box">
				<view class="batch" :class="item.batch == batch ? 'active' : ''" v-for="item in batchs">
					<view class="batch-hover" hover-class="clickable" @click="selectBatch(item)">
						{{item.batch}}
					</view>
				</view>
			</view>
			<view class="card-head">
				<view class="swtich-box">
					<view :class="top == 'img' ? 'active' : ''" @click="top = 'img'">原图</view>
					<view :class="top == 'aiImg' ? 'active' : ''" @click="top = 'aiImg'">AI识别</view>
				</view>
			</view>
			<view class="swiper-box">
				<view class="minutes" v-if="list.length">{{list[current].Minutes}}</view>
				<u-swiper class="custom-swiper" :list="list" :keyName="top == 'img' ? 'img' : 'aiImg'" showTitle
					:autoplay="false" circular imgMode="scaleToFill" :current="current" @change="change"
					@click="clickImg"></u-swiper>
			</view>
			<view class="card-head">
				<view class="swtich-box">
					<view :class="bottom == 'chart' ? 'active' : ''" @click="bottom = 'chart'">趋势图</view>
					<view :class="bottom == 'table' ? 'active' : ''" @click="bottom = 'table'">趋势表</view>
				</view>
			</view>
			<view class="table-box">
				<view class="chart" v-if="bottom == 'chart' && list.length">
					<e-chart :type="'line'" :options="options"></e-chart>
				</view>
				<view class="table" v-if="bottom == 'table' && list.length">
					<custom-table :info="info" :header="header" :columns="columns" :tableData="tableData" />
				</view>
			</view>
		</view>
		<no-data v-else></no-data>
		<pop-box>
			<popup :show="dateVisible" mode="bottom"  @close="dateVisible = false" @open="dateVisible = true">
				<view class="suggest" style="padding: 20rpx;">
					<zzx-calendar ref="zzx_calendar" :dotList="dotList" :dotStyle="{background: '#3C9CFF'}" @selected-change="changeDate" @days-change="changeMonth"></zzx-calendar>
				</view>
			</popup>
		</pop-box>
		
	</view>
</template>

<script>
	import DatePicker from '@/components/custom/date-picker/date-picker'
	import moment from 'moment'
	import _custom from '@/common/_custom.js'
	import {
		formatImg
	} from '@/common/custom_util.js'
	import CustomTable from '@/components/custom/table/table.vue'
	import EChart from '@/components/custom/chart/echart.vue'
	import NoData from '@/components/custom/no-data/no-data.vue'
	import PopBox from '@/components/custom/pop-box/index.vue'
	import Popup from '@/components/custom/uview/u-popup/u-popup.vue'

	export default {
		components: {
			DatePicker,
			CustomTable,
			EChart,
			NoData,
			PopBox,
			Popup
		},
		data() {
			return {
				date: moment().format('YYYY-MM-DD'),
				dotList: [],
				dateVisible: false,
				batchs: [],
				batch: '',
				list: [],
				current: 0,
				top: 'img',
				bottom: 'chart',
				options: {},
				info: {
					top: '点位',
					bottom: '分钟'
				},
				header: [],
				columns: [],
				tableData: [{
						column: 'SV01',
						row: '25',
						value: '2'
					},
					{
						column: 'SV02',
						row: '5',
						value: '2'
					},
					{
						column: 'SV03',
						row: '15',
						value: '2'
					},
				]
			}
		},
		mounted() {
			this.getSV30DayBatchList()
		},
		computed: {
			title() {
				return moment(this.date).format('YYYY.MM.DD');
			}
		},
		methods: {
			titleClick() {
				this.getSV30DaysInMonth()
				this.dateVisible = true;
			},
			changeDate(v) {
				this.bottom = 'chart';
				this.date = moment(v.fullDate).format('YYYY-MM-DD')
				this.dateVisible = false;
				this.getSV30DayBatchList();
			},
			changeMonth(v) {
				if(v.type == 'swiper') {
					this.date = moment(v.start).format('YYYY-MM-DD');
					this.getSV30DaysInMonth();
				}
			},
			selectBatch(v) {
				this.batch = v.batch;
				this.getSV30BatchDataList()
			},
			change(e) {
				this.current = e.current;
			},
			clickImg(i) {
				let imgList = []
				if (this.top == 'img') {
					this.list.forEach(item => {
						imgList.push(item.img)
					})
				} else {
					this.list.forEach(item => {
						imgList.push(item.aiImg)
					})
				}
				uni.previewImage({
					current: i,
					urls: imgList,
					indicator: 'number'
				})
			},
			/**
			 * 获取打点日期
			 */
			getSV30DaysInMonth() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSV30DaysInMonth',
					apiparam: {
						month: moment(this.date).format('YYYY-MM')
					},
					success(res) {
						let temp = []
						res.forEach(v => {
							temp.push({
								date: moment(v.day).format('YYYY-MM-DD'),
								colors: ['#3C9CFF']
							})
						})
						that.dotList = temp;
					}
				})
			},
			getSV30DayBatchList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSV30DayBatchList',
					apiparam: {
						obsdate: this.date
					},
					success(res) {
						that.batchs = res
						if (res.length) {
							that.batch = res[0].batch;
							that.getSV30BatchDataList()
						} else {
							that.list = []
						}
					}
				})
			},
			getSV30BatchDataList() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSV30BatchDataList',
					apiparam: {
						obsdate: this.date,
						batch: this.batch
					},
					success(res) {
						let newArr = [];
						let header = [];
						let series = [];
						let legends = [];
						let colors = ['#2560F7', '#FF81C0', '#03FAFB', '#7B2CFF', 'pink', 'skyblue'];
						for (var i = 0; i < res.length; i++) {
							let flag = true
							legends.forEach(item => {
								if(item.name == res[i].PointName) {
									flag = false
								}
							})
							if(flag) {
								legends.push({
									name: res[i].PointName
								})
							}
							var index = newArr.findIndex(function(item) {
								return item.Minutes === res[i].Minutes
							});
							var indey = header.findIndex(function(item) {
								return item.prop === res[i].PointName
							});
							if (index !== -1) {
								newArr[index].Volumn.push({
									point: res[i].PointName,
									volumn: res[i].Volumn,
									[res[i].PointName]: res[i].Volumn
								});
							} else {
								newArr.push({
									...res[i],
									Volumn: [{
										point: res[i].PointName,
										volumn: res[i].Volumn,
										[res[i].PointName]: res[i].Volumn
									}]
								})
							}
							if(indey === -1) {
								header.push({
									prop: res[i].PointName,
									label: res[i].PointName,
								})
							}
						}
						header.forEach((v,i) => {
							let temp = [];
							res.forEach(item =>{
								if(item.PointName == v.label) {
									temp.push(item.Volumn)
								}
							})
							series.push({
								name: v.label,
								type: 'line',
								showAllSymbol: true,
								symbolSize: 5,
								smooth: true,
								label: {
									show: false,
								},
								lineStyle: {
									normal: {
										width: 2,
										color: colors[i], // 线条颜色
									},
									borderColor: 'rgba(0,0,0,.4)',
								},
								itemStyle: {
									color: colors[i],
									borderColor: colors[i],
									borderWidth: 2
								},
								tooltip: {
									show: true
								},
								data: temp
							})
						})
						let label = [];
						let columns = [];
						let tableData = [];
						newArr.forEach((item, index) => {
							let temp = [];
							newArr.forEach((z, x) => {
								z.Volumn.forEach((v, i) => {
									if (index == i) {
										temp.push(v.volumn)
									}
								})
							})
							try {
								item.img = formatImg(item.FilePath)
								item.aiImg = formatImg(item.FilePathAI)
							} catch (e) {}
							item.title = item.savetime;
							let point = item.Volumn[index] ? item.Volumn[index].point : ''
							let value = item.Volumn[index] ? item.Volumn[index].volumn : ''
							columns[index] = {};
							item.Volumn.forEach((v, i) => {
								let active = false
								if (item.Minutes == '30') {
									active = true
								}
								tableData.push({
									column: v.point,
									row: item.Minutes,
									value: v.volumn,
									active: active
								})
								columns[index]['prop'] = item.Minutes;
								columns[index]['label'] = item.Minutes;
							});
							label.push(item.Minutes + '分钟')
						})
						that.options = {
							animation: false,
							series,
							tooltip: {
								trigger: 'axis',
								backgroundColor: 'rgba(0,0,0,.1)',
								axisPointer: {
									lineStyle: {
										color: {
											type: 'linear',
											x: 0,
											y: 0,
											x2: 0,
											y2: 1,
											colorStops: [{
												offset: 0,
												color: 'rgba(126,199,255,0)' // 0% 处的颜色
											}, {
												offset: 0.5,
												color: 'rgba(126,199,255,1)' // 100% 处的颜色
											}, {
												offset: 1,
												color: 'rgba(126,199,255,0)' // 100% 处的颜色
											}],
											global: false // 缺省为 false
										}
									},
								},
							},
							legend: {
								align: "left",
								right: '1%',
								top: '3%',
								type: 'plain',
								textStyle: {
									color: '#000',
									fontSize: 12
								},
								// icon:'rect',
								itemGap: 15,
								itemWidth: 10,
								itemHeight: 10,
								icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
								data: legends
							},
							grid: {
								top: '20%',
								left: '8%',
								right: '5%',
								bottom: '15%',
							},
							xAxis: [{
								type: 'category',
								boundaryGap: false,
								axisLine: { //坐标轴轴线相关设置。数学上的x轴
									show: true,
									lineStyle: {
										color: '#EDECF0'
									},
								},
								axisLabel: { //坐标轴刻度标签的相关设置
									showMaxLabel: true,
									textStyle: {
										color: '#C4C4C4',
										fontSize: 10
									}
								},
								splitLine: {
									show: true,
									lineStyle: {
										color: '#EDECF0'
									},
								},
								axisTick: {
									show: false,
								},
								data: label
							}],
							yAxis: [{
								name: '沉降比（%）',
								nameTextStyle: {
									color: "#C4C4C4",
									fontSize: 10,
									padding: [20, 0, 0, 5]
								},
								min: 0,
								splitLine: {
									show: true,
									lineStyle: {
										color: '#EDECF0'
									},
								},
								axisLine: {
									show: true,
									lineStyle: {
										color: "#EDECF0"
									}

								},
								axisLabel: {
									show: true,
									fontSize: 10,
									textStyle: {
										color: '#C4C4C4',
									},
								},
								axisTick: {
									show: false,
								},
							}],
						}
						that.current = 0;
						that.list = newArr;
						that.header = header;
						that.columns = columns;
						that.tableData = tableData;
						console.log(that.options);
					}
				})
			},
		}
	}
</script>


<style lang="scss">
	$bg-color: #f4f7f9;

	.nav-title {
		width: 100%;
		font-size: 25rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.nav-title-icon>image {
		width: 20rpx;
		height: 20rpx;
		margin-left: 10rpx;
	}

	.batch-box {
		height: 100rpx;
		overflow-x: scroll;
		display: flex;
		padding: 20rpx 0;
		background-color: $bg-color;
	}

	.batch {
		background-color: #fff;
		margin: 0 20rpx;
		border-radius: 10rpx;
		color: #000;
	}

	.batch-hover {
		line-height: 80rpx;
		padding: 10rpx 20rpx;
		box-sizing: border-box;
	}

	.swiper-box {
		padding: 20rpx;
		position: relative;
	}

	.minutes {
		position: absolute;
		top: 30rpx;
		right: 30rpx;
		padding: 20rpx;
		background-color: rgba(255, 255, 255, .3);
		font-size: 30rpx;
		color: orangered;
		font-weight: bold;
		z-index: 99;
		border-radius: 10rpx;
	}

	.card-head {
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: $bg-color;
	}

	.table-box {
		padding: 20rpx;
		min-height: 500rpx;
		box-sizing: border-box;
	}

	.chart {
		width: 100%;
		box-sizing: border-box;
		height: 500rpx;
		border-radius: 40rpx;
	}

	.swtich-box {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		text-align: center;
		background-color: #fff;
		border-radius: 10rpx;
		position: relative;
	}

	.swtich-box>view {
		flex: 1;
		height: 100%;
		color: #000;
		line-height: 100rpx;
		padding: 0 20rpx;
	}

	.swtich-box>view:first-child {
		border-radius: 10rpx 0 0 10rpx;
	}

	.swtich-box>view:last-child {
		border-radius: 0 10rpx 10rpx 0;
	}
</style>
<style scoped>
	/deep/ .custom-nav-bar .uni-status-bar,
	/deep/ .custom-nav-bar .uni-navbar__header {
		background: linear-gradient(to right, #6AD7F8, #10AADC);
	}

	/deep/ .custom-swiper,
	/deep/ .custom-swiper .u-swiper__wrapper__item__wrapper__image,
	/deep/ .custom-swiper .u-swiper__wrapper {
		height: 500rpx !important;
	}
</style>
